<template>
  <section class="circulation-container">
    <div class="top-bar">
      <div class="top-bar-tag"></div>
      <div class="top-bar-title">签署流程</div>
    </div>
    <div class="main">
      <div class="table-container">
        <el-table :data="flowList" border stripe>
          <el-table-column label="签署人" align="center" prop="creatorName" width="150"></el-table-column>
          <el-table-column label="内容" align="center" prop="comments"></el-table-column>
          <el-table-column label="时间" align="center" prop="created" width="250" :formatter="createdFmt"></el-table-column>
        </el-table>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    name: 'FlowApproveSign',
    props:{
      flowList:{
        type:Array
      }
    },
    data() {
      return {

      }
    },
    created() {
    },
    methods: {
      createdFmt(row){
        return row.created ? this._util.format(row.created) : row.created
      }
    }
  }
</script>

<style scoped lang="scss">
  $height:35px;
  $borderColor:1px solid #e0e0e0;
  $boxShadow:0 0 3px rgba(0,0,0,0.1);
.circulation-container {
  border: $borderColor;
  margin-bottom: 20px;
  box-shadow: $boxShadow;

  .main {
    padding: 15px;
    background: white;
    i {
      font-size: 15px;
      cursor: pointer;
      transition: all 0.1s linear;
      color:gray;
      &:hover {
        color: #409EFF;
      }
      &.template-add {
        margin-left: 10px;
        font-size: 20px;
      }
    }
    .table-container {
      margin: 10px 0;
    }
  }
  .top-bar {
    height: $height;
    line-height: $height;
    padding: 0 15px;
    background-color: #FBFBFB;
    border-bottom: $borderColor;
    display: flex;
    justify-content: space-between;
    .top-bar-tag {
      width: 5px;
      height: $height;
    }
    .top-bar-title{
      font-size: 16px;
    }
    .top-bar-section {

    }
  }
}
</style>
